<template>
	<slot>
		<el-input v-model="linkValue" @click="openDialog()" readonly="true" placeholder="请输入链接地址">
			<template #append>
				<el-button @click="copyText(linkValue)">复制链接</el-button>
			</template>
		</el-input>
	</slot>
	<el-dialog ref="dialogRef" title="页面链接" v-model="showDialog" width="760px" @opened="initDialog">
		<div>
			<el-tabs v-model="selectTab" tab-position="left" style="height: 420px">
				<el-tab-pane label="基础页面" name="sys">
					<span class="mr10" v-for="(item, index) in linkData.data" :key="index">
						<el-button class="mb10" :class="{active:linkValue == item.link}" @click="getJumpLink(item.link)">{{ item.name }}</el-button>
					</span>
				</el-tab-pane>
				<el-tab-pane label="自定义链接" name="link">
					<el-form-item label="链接地址：">
						<el-input v-model="linkData.link" class="w-180" placeholder="请输入自定义链接" @blur="getJumpLink(linkData.link)" />
						<div class="el-form-tips">完整链接地址：请包含"http://"或"https://"，系统内页面链接：链接前面自动拼接系统域名</div>
					</el-form-item>
				</el-tab-pane>
			</el-tabs>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="showDialog = false">取消</el-button>
				<el-button type="primary" @click="confirm">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';
import { linkList } from '/@/api/diy';
import { messageSuccess } from '/@/utils/message';
import commonFunction from '/@/utils/commonFunction';

const { copyText } = commonFunction();

const props = defineProps({
	modelValue: {
		type: String,
		required: true,
		default: '',
	},
	type: {
		type: Number,
		default: 1, // 1-移动端 2-PC端
	},
});

const dialogRef = ref(null);

const showDialog = ref(false);

const linkData = reactive({
	data: [],
	link: '',
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const selectTab = ref('sys');

const linkValue = computed({
	get() {
		return props.modelValue;
	},
	set(value) {
		emit('update:modelValue', value);
	},
});

const initDialog = () => {
	linkValue.value = props.modelValue;
	getData();
};

const openDialog = () => {
	showDialog.value = true;
	if (linkValue.value.indexOf('http:') != -1 || linkValue.value.indexOf('https:') != -1) {
		selectTab.value = 'link';
		linkData.link = linkValue.value;
	} else {
		selectTab.value = 'sys';
	}
};

const getData = async () => {
	const data = await linkList({
		type: props.type,
	});
	linkData.data = data;
};

const getJumpLink = async (url: string) => {
	if(url) {
		linkValue.value = url;
		messageSuccess('切换链接成功');
	}
};

const confirm = async () => {
	showDialog.value = false;
	emit('confirm', linkValue);
};

defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type.select-btn-group {
	margin-bottom: 0 !important;
}
.el-button.active {
    background-color: var(--el-button-hover-bg-color);
    border-color: var(--el-button-hover-border-color);
    color: var(--el-button-hover-text-color);
    outline: none;
}
</style>
